<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="../../css/bootstrap.css" rel="stylesheet">
    <title>popover</title>
</head>

<body>

    <div class="popover left">
        <div class="arrow"></div>
        <h3 class="popover-title">Popover left</h3>
        <div class="popover-content">
            <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
            <div>
                <button type="button" id="no_btn" class="btn btn-default btn-sm">取消</button>
            </div>
        </div>
    </div>
    <div class="well">
        <a id="popBtn" tabindex="0" role="button" class="btn btn-default" data-container="body" data-trigger="focus" data-toggle="popover"
            data-placement="bottom">
            Popover on left
        </a>
        <a href="#" id="example" role="button" class="btn btn-default" data-toggle="popover" data-placement="bottom">
            请悬停在我的上面
        </a>
    </div>
    
    <script src="../../js/jquery-1.12.4.js"></script>
    <script src="../../js/bootstrap/tooltip.js"></script>
    <script src="../../js/bootstrap/popover.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#popBtn').popover({
                html: true,
                trigger: 'manual',
                content: "hello world"
            });
            $('#example').popover({
                html: true,
                title: "",
                content: $("div.left").html()
            }).click(function(){
                console.log('no button');
                $('#example').popover('hide');
            });

        });

        function noClick(){
            console.log(' noClick');
            $('#example').popover('hide');
        }
    </script>
</body>

</html>